import Counts from "./counts.jsx";
import Button from "./button.jsx";
import React, { useState, useEffect } from "react";

export default function ParentComponent() {
    const [cheeseType, setCheeseType] = useState("");
    const [wine, setWine] = useState("");
    const whichWineGoesBest = () => {
        switch (cheeseType) {
            case "奶酪":
                return setWine("红葡萄");
            case "披萨":
                return setWine("白葡萄酒");
            case "鲜奶":
                return setWine("面包");
            default:
                "白葡萄酒";
        }
    };
    useEffect(() => {
        let mounted = true;
        if (mounted) {
            whichWineGoesBest();
        }
        return () => (mounted = false);
    }, [cheeseType]);

    return (
        <div>
            <div>
                <Button text={"奶酪"} onClick={() => setCheeseType("奶酪")} />
                <Button text={"披萨"} onClick={() => setCheeseType("披萨")} />
                <Button text={"鲜奶"} onClick={() => setCheeseType("鲜奶")} />
            </div>
            {/* 点击切换一下，数量增加2，是因为进行了两次set方法(setCheeseType,setWine) */}
            {cheeseType && (
                <p>
                    搭配{cheeseType}, <span>{wine}</span>最佳.
                </p>
            )}
            <Counts />
        </div>
    );
}